$width: 500px;

.search-engine {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 10px 0;

  .input-wrapper {
    position: relative;
    width: $width;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;

    input {
      padding-left: 10px;
      padding-right: 10px;

      &:-webkit-autofill-selected {
        background-color: transparent !important;
        box-shadow: inset 0 0 0 500px transparent !important;
      }      
    }

    .left-icon {
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
    }

    .search-icon {
      cursor: pointer;
    }
  }

  .engine-main {
    z-index: 999;
    position: absolute;
    top: 65px;
    left: 50%;
    width: $width;
    padding: 15px 15px 0 15px;
    background: #fff;
    transform: translate(-50%, 0);
    box-shadow: 0 1px 5px #ccc;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;

    &:after {
      content: '';
      position: absolute;
      top: -11px;
      left: 17px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 20px 10px;
      border-color: transparent transparent #ffffff transparent;
    }

    .item {
      width: calc(33.33% - 10px);
      padding: 10px;
      display: flex;
      background: #f6f6f6;
      cursor: pointer;
      margin-bottom: 15px;
      border-radius: 3px;
      transition: .1s linear;
      box-sizing: border-box;
      border: 1px solid transparent;

      &:not(:nth-child(3n)) {
        margin-right: 15px;
      }

      .name {
        margin-left: 10px;
        font-size: 16px;
        align-self: center;
      }
    }
  }

  ::ng-deep .removeAddon .ant-input-group-addon {
    display: none !important;
  }
}

@media screen and (max-width: 668px) {
  .input-wrapper {
    width: 90vw !important;
  }
}
